<template>
  <!-- 新增 -->
  <section class="component modify-dataDict">
    <el-form
      :rules="rules"
      :model="changeParams"
      ref="add-form"
      label-width="150px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="父类别" prop="parentName">
            <el-input
              v-model.trim="changeParams.parentName"
              size="small"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代码名称" prop="name">
            <el-input v-model.trim="changeParams.name" size="small" maxlength="16"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" min-width="140px" prop="status">
            <el-select
              v-model="changeParams.status"
              placeholder="请选择"
              size="small"
            >
              <!-- <el-option v-for="{ index, name, code } in $dict.getDictData( 'EntityStrategyState' )" :key="index" :label="name" :value="code"></el-option> -->
              <el-option label="有效" value="1"></el-option>
              <el-option label="无效" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优先级" min-width="140px" prop="level">
            <el-input v-model.trim="changeParams.level" size="small" maxlength="6"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item label="关联修饰代码" prop="relevantCode" v-if="IsSuperAdmin === 'YES'"> -->
          <el-form-item
            label="关联修饰代码"
            prop="relevantCode"
            v-if="changeParams.changeParamsId === '1'"
          >
            <el-select
              v-model="changeParams.relevantCode"
              value-key="id"
              multiple
              placeholder="请选择"
              :collapse-tags="true"
              clearable
            >
              <el-option
                v-for="item in relevantCds"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="代码说明" prop="introduceCode">
            <el-input
              type="textarea"
              v-model.trim="changeParams.introduceCode"
              :autosize="{ minRows: 2, maxRows: 4 }"
              style="width: 86%"
              :maxlength="500"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="changeCancel" plain>取消</el-button>
      <el-button @click="changeCommit" type="primary">保存</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { DataPoolService } from "~/services/common-service/data-pool.service";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { Getter } from "vuex-class";
import { UserService } from "~/services/management-service/user.service";

@Component({
  components: {},
})
export default class ModifyDataDict extends Vue {
  @Dependencies(DataPoolService)
  private dataPoolService: DataPoolService;
  @Dependencies(UserService)
  private userService: UserService;
  @Prop({
    default: () => [],
  })
  @Prop({ required: true })
  private tableRow: any;
  @Prop() private treeDatas: any[];
  // 数据实体
  private changeParams: any = {
    parentName: "",
    parentId: "",
    name: "",
    status: "",
    level: "",
    relevantCode: [],
    introduceCode: "",
    changeParamsId: "",
  };
  private relevantCds: any = [];
  @Prop()
  private IsSuperAdmin: any;
  private changeParamsId: any;
  private changeParamsParentId: any;
  private rules: any = {
    parentName: { required: true, message: "请输入父类别" },
    name: [
      { required: true, message: "请输入代码名称" },
      { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号', trigger: "blur"}
    ],
    status: { required: true, message: "请选择状态" },
    level: [
      { required: true, message: "请输入优先级" },
      {
        pattern: /^\+?[0-9][0-9]*$/,
        message: "优先级应输入正数",
        trigger: "blur",
      },
    ],
  };
  @Emit("refreshList")
  private refreshList() {}
  @Emit("close")
  private close() {
    this.reset();
  }
  private change() {
    this.$forceUpdate();
  }

  private refresh(data, node) {
    this.relevantCds = [];
    this.changeParams.parentName = data.name;
    this.changeParams.parentId = data.id;
    // 关联修饰代码 update
    this.changeParams.changeParamsId = data.id;
    if (data.codeType === "KG_CODE") {
      this.userService
        .selectAllByCode({ code: "XS_CODE" })
        .subscribe((data) => {
          this.relevantCds = data;
        });
    }
  }

  /**
   * 重置form
   */
  private reset() {
    const Form: any = this.$refs["add-form"];
    Form.resetFields();
  }

  /**
   * 提交验证并并与数据库交互
   */
  private changeCommit() {
    const form: any = this.$refs["add-form"];
    form.validate((valid) => {
      if (!valid) {
        return;
      }
      let flag = true;
      this.treeDatas.forEach((x) => {
        if (x.label === this.changeParams.name) {
          flag = false;
          this.$message.error("字段名称重复请重新输入!");
        }
      });
      if (!flag) {
        return false;
      }
      this.userService
        .addCodeConfigInfo(this.changeParams)
        .subscribe((data) => {
          //   刷新databox
          this.$emit("refreshList", this.changeParams.parentId);
          this.$emit("close");
          this.$message.success("新增成功!");
          const form: any = this.$refs["add-form"];
          form.resetFields();
          this.relevantCds = [];
        });
    });
  }

  private queueIdChange(data, node) {
    // 刷新当前节点
    node.loaded = false;
    node.expand();
  }

  private changeCancel() {
    const form: any = this.$refs["add-form"];
    form.resetFields();
    this.$emit("close");
  }
}
</script>

<style lang="less" scoped>
.component.modify-dataDict {
  .changeButton {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
